<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2531843_db7g6z3cnbl.css"/>
		<style>
			ul{
				list-style:none;
			}
			a{
				text-decoration:none;
			}
			.pageContent{
				
				white-space:pre-wrap;
			}
			.footer{
				font-size:.9rem;
				text-align:center;
			}
			/*手机端*/
			@media screen and (max-width:429px){
				.header{
					display:flex;
					width:100%;
					flex-wrap:wrap;
				}
				.title{
					width:90%;
				}
				i{
					width:10%;
				}
				.nav{
					width:100%;
					height:0;
					margin:.75rem 0;
					overflow:hidden;
					transition:height .3s linear 0s;
					background:rgba(46,139,87,1);
					border-radius:.375rem;
				}
				ul{
					padding:0 2.5rem;
					margin:0.625rem 0;
				}
				.nav li{
					width:100%;
					margin:3px 0;
					line-height: 1.3rem;
					background:rgba(211,211,211,.1);
					border-radius:3px;
				}
				.nav li:nth-child(2){
					width:95%;
				}
				.nav li:nth-child(3){
					width:90%;
				}
				.nav a{
					padding-left:0.9375rem;
					font-size:.9rem;
					color:#000;
				}
				.nav a i{
					font-size:.8rem;
					color:#ccc;
				}
				.footer{
					font-size:.9rem;
					text-align:center;
				}
			}
			@media screen and (min-width:480px){
				*{
					margin:0;
					padding:0;
				}
				html{
					font-size:22px;
				}
				.header i{
					display:none;
				}
				ul{
					overflow:hidden;
					width:91%;
					height:50px;
					margin:10px auto;
					background:rgba(46,139,87,1);
				}
				ul li{
					float:left;
				}
				ul li a{
					line-height:50px;
					color:#fff;
				}
				h1,.createTime,.pageContent,.footer{
					width:90%;
					margin:10px auto;
				}
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="title"> liuboy 起点</div>
			<i>三</i>
			<div class="nav">
				<ul>
					<li><a href="index.html"><i class="iconfont icon-zhuye"></i>&nbsp;主页</a></li>
					<li><a href="jilu.html"><i class="iconfont icon-jilu1"></i>&nbsp;记录</a></li>
					<li><a href="pages.html"><i class="iconfont icon-wenzhang"></i>&nbsp;文章</a></li>
				</ul>
			</div>
		</div>
		<h1></h1>
		<div class="createTime"></div>
		<div class="pageContent">
			
		</div>
		<div class="footer">
			<i>版权所有</i>
		</div>
	</body>
	<script src="./ajax.js"></script>
	<script>
		var $ = (el)=>{return document.querySelector(el)}
		var h1 = $('h1')
		var i = $('i')
		var nav = $('.nav')
		var createTime = $('.createTime')
		var pageContent = $('.pageContent')
		i.addEventListener("click",()=>{if(nav.style.height=='5.625rem'){nav.style.height='0'}else{nav.style.height=5.625+'rem'};})
		var queryId = window.location.search.slice(4)
		ajax({
			url:'http://localhost:3000/pageInfo/'+queryId,
			type:'GET',
			async:true,
			data:{},
			success:function(data){
				console.log(data)
				dataJson = JSON.parse(data)
				h1.innerHTML = dataJson[0].title
				createTime.innerHTML = dataJson[0].createtime
				pageContent.innerHTML = dataJson[0].content
			}
		})
	</script>
</html>
